<script>
import { add, art, fn } from '@/api/system/axios'
import { management, open } from '@/api/evaluationManagement/deleteDom'
import { evaluation } from '@/api/evaluationManagement/http'
import Editor from '@/components/Editor/index.vue'
import { getToken } from '@/utils/auth'
import { header } from 'quill/ui/icons'

export default ({
  name: 'index',
  components:{
    Editor
  },
  data() {
    return {
      //对话框组件--详情
      dialogVisibleyi: false,
      //上传照片组件
      dialogImageUrl: '',
      dialogVisibleone: false,
      // 输入框组件
      input: '',
      content:'',
      // 表格组件
      // tableData: [{
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '张老师'
      // }, {
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '张老师'
      // }, {
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '张老师'
      // }, {
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '张老师'
      // }],
      // tableData:[
      //   {
      //     index:0,
      //     title:"",
      //     author:"",
      //     sendTime:""
      //   }
      // ],
     //对话框组件
      dialogVisible: false,
     // select下拉菜单组件
      options: [
        {
        value: '选项1',
        label: '情感'
      }, {
        value: '选项2',
        label: '性格'
      }, {
        value: '选项3',
        label: '情绪'
      }, {
        value: '选项4',
        label: '问题'
      }, {
        value: '选项5',
        label: '压力'
      }],
      value: '',
      total:0,
      form:{
         title:'',
         pageSize:10,
         pageNum:1,
      },
      tableData:[],
      editdialogVisible:false,
      headers:{
        Authorization:getToken()
      },
      articlecan:{
        title:'',
        titlePicture:'',
        categoryId:'',
        content:'',
      },//添加文章接口参数
    }
  },

  methods: {
    //表格索引
    indexMethod(index) {
      return index +1;
    },
    //搜索 表单参数
    onSubmit() {
      art({...this.form}).then(res=>{
        this.tableData=res.rows
      })
    },
    //重置
    reset(){
      this.form={
        title:'',
      }
      art().then(res=>{
        this.tableData=res.rows
      })
    },
    //分页
    handleSizeChange(val) {
      this.form.pageSize=val
      art({...this.form}).then(res=>{
        this.total=res.total
        this.tableData=res.rows
      })
    },
    handleCurrentChange(val) {
      this.form.pageNum=val
      art({...this.form}).then(res=>{
        this.total=Number(res.total)
        // console.log(this.total)
        this.tableData=res.rows
      })
    },
    //删除
    open(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        open(id)
        //11111
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //上传照片组件
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handleSuccess(file){
      this.articlecan.titlePicture = file.fileName
    },
    handleChange(file,fileList) {
      // console.log(file)
      // console.log(fileList)
    },
    //对话框组件--详情
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //点击添加
    addairtic(data){
      this.dialogVisible = false;
      add(data)
        .then(res=>{
          console.log(res)
          if(res.code == 200){
            this.$message.success("添加成功")
          }
        })
        .catch(error=>{
          this.$message.error("请检查您的填写内容是否正确")
        })
    }
  },

  created(){
    //列表数据请求
    art().then(res=>{
      // console.log(res)
      this.total=Number(res.total)
      this.tableData=res.rows
    })
  },

})
</script>

<template>
<div id="box">
  <div class="white-back">

     <!--form表单组件-->
     <el-form ref="form" :model="form" label-width="80px" class="formtable">
       <el-form-item label="文章名称">
         <el-input v-model="form.title" placeholder="请输入文章名称"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button @click="reset">重置</el-button>
         <el-button type="primary" @click="onSubmit">搜索</el-button>
       </el-form-item>
     </el-form>

         <!--添加那的对话框组件 -->
         <el-button type="primary" @click="dialogVisible = true" class="add">添加</el-button>
         <el-dialog
           class="additive"
           title="添加文章"
           append-to-body
           :visible.sync="dialogVisible"
           width="50%">
           <div><span>文章标题</span><el-input v-model="articlecan.title" placeholder="请输入标题名称" class="putin"></el-input></div>
           <!--封面图片+选择文章栏目-->
           <div class="circle">
             <span>封面图片</span>
<!--             <div class="square"></div>-->
             <!--上传图片组件-->
             <el-upload
               action="http://192.168.5.120:8090/common/upload"
               ref="upload"
               :headers="headers"
               :limit="1"
               list-type="picture-card"
               :on-remove="handleRemove"
               :on-success="handleSuccess"
               >
               <i class="el-icon-plus"></i>
             </el-upload>
             <el-dialog :visible.sync="dialogVisibleone">
               <img width="50%" :src="dialogImageUrl" alt="">
             </el-dialog>

             <span class="column">选择文章栏目</span>
             <el-select v-model="articlecan.categoryId" placeholder="请选择">
               <el-option
                 v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
           </div>
           <!--文章内容 富文本信息-->
           <div class="full">
             <span>文章内容</span>
             <Editor v-model="articlecan.content"></Editor>
           </div>

           <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="addairtic(articlecan)">保存</el-button>
           </span>
         </el-dialog>


     <!--表格组件-->
     <el-table class="table"
       :data="tableData"
       border
       style="width: 100%">
       <el-table-column
         type="index"
         label="序号"
         :index="indexMethod"
         width="80">
       </el-table-column>
       <el-table-column
         prop="title"
         label="文章名称"
         width="693">
       </el-table-column>
       <el-table-column
         prop="author"
         label="发布人"
         width="270">
       </el-table-column>
       <el-table-column
         prop="sendTime"
         label="创建时间"
         width="305">
       </el-table-column>
       <el-table-column
         prop="name"
         label="操作"
         width="">
         <!--详情-->
<!--         <span>详情</span>-->
<!--         <div class="a1" style="display: inline-block">-->
<!--         <el-button type="text" @click="dialogVisibleyi = true" style="color: #00afff">详情</el-button>-->
<!--         <el-dialog-->
<!--           title="提示"-->
<!--           append-to-body-->
<!--           :visible.sync="dialogVisibleyi"-->
<!--           width="30%"-->
<!--           :before-close="handleClose">-->
<!--           <span></span>-->
<!--           <span slot="footer" class="dialog-footer">-->
<!--            <el-button @click="dialogVisibleyi = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="dialogVisibleyi = false">确 定</el-button>-->
<!--           </span>-->
<!--         </el-dialog>-->
<!--         </div>-->

         <!--编辑-->
         <template slot-scope="scope">
           <span  @click="editdialogVisible = true" class="add">编辑</span>
           <!--<el-button type="primary" @click="editdialogVisible = true" class="add">编辑</el-button>-->
           <el-dialog class="additive"
                      title="编辑文章"
                      append-to-body
                      :visible.sync="editdialogVisible"
                      width="50%">
             <div><span>文章标题</span><el-input v-model="content" placeholder="请输入标题名称" class="putin"></el-input></div>
             <!--封面图片+选择文章栏目-->
             <div class="circle">
               <span>封面图片</span>
               <!--             <div class="square"></div>-->
               <!--上传图片组件-->
               <el-upload
                 action="http://192.168.5.120:8090/common/upload"
                 ref="upload"
                 :limit="1"
                 :headers="headers"
                 list-type="picture-card"
                 :on-change="handleChange"
                 :on-success="handleSuccess"
                 :on-remove="handleRemove">
                 <i class="el-icon-plus"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisibleone">
                 <img width="50%" :src="dialogImageUrl" alt="">
               </el-dialog>


               <span class="column">选择文章栏目</span>
               <el-select v-model="value" placeholder="请选择">
                 <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
             </div>



             <!--文章内容 富文本信息-->
             <div class="full">
               <span>文章内容</span>
               <Editor></Editor>
             </div>

             <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="dialogVisible = false">保存</el-button>
           </span>
           </el-dialog>

           <!--删除-->
           <el-button type="text" @click="open(scope.row.id)" class="delete">删除</el-button>
         </template>

       </el-table-column>
     </el-table>

    <!--分页器-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next"
      :total=total>
    </el-pagination>

   </div>
</div>
</template>

<style scoped lang="scss">
Editor{
  height: 50%;
  width: 80%;
}

.white-back{
  width: 1682px;
  //height: 975px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Roboto;
  padding: 20px;
}

.arti{
  width: 56px;
  height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin-right: 20px;
  margin-left: 30px;
}
.el-input--medium{
  width: 200px;
  height: 30px;
}

.add{
  margin: 20px 0 0 25px;
}
.el-table{
  margin-top: 20px;
}
.pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}
.art{
  display: flex;
  justify-content: space-between;
}
::v-deep .el-button--text{
  color: white;
  margin-top: -3px;
}
::v-deep .el-dialog__header{
  background-color: #1892FF;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-icon-close:before{
  color: white;
}
::v-deep .el-input__inner{
  //width: 780px;
}
.putin{
  width: 780px;
}
::v-deep .el-dialog__title{
  color: white;
}
::v-deep .el-dialog__body{
  height: 600px;
}
.circle{
  margin-top: 20px;
  display: flex;
}
//.square{
//   width: 117px;
//   height: 118px;
//   border: 1px solid rgba(204, 204, 204, 1);
//}
.column{
  display: inline-block;
  margin: 5px 5px 0 50px;
}
.full{
  display: flex;
}
.full span{
  display: inline-block;
  margin-top: 20px;
}
.full div{
  width: 783px;
  height: 269px;
  border: 1px solid #cccccc;
  margin-top: 15px;
  border-radius: 4px;
  text-align: center;
  line-height: 350px;
  color: rgba(16, 16, 16, 1);
  font-size: 25px;
}
::v-deep .el-table--border .el-table__cell:first-child .cell{
  text-align: center;
}

::v-deep .el-table .cell{
  text-align: center;
}
.table span{
   color: #00afff;
   margin-left: 10px;
}
.table span:hover{
   cursor: pointer;
}
#box{
  width: 100%;
  background-color: rgb(242, 243, 244);
  padding: 15px;
}

.formtable{
  display: flex;
  justify-content: space-between;
}

::v-deep .el-pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.delete{
  color: #00afff;
  margin-left: 12px;
}
.additive span{
  margin-right: 10px;
}
</style>
